<template>
    <div>
        <div class="home_section" v-for="item,index in goodsList" :key="item.id">
            <div class="container">
                <div class="head">
                    <h3>{{item.name}}</h3>
                    <div class="sub">
                        <a href="javascript:;" v-for="home in item.children"> {{home.name}}</a>
                    </div>
                    <a href="javascript:;">查看全部&gt;</a>
                </div>
                <div class="content">
                    <div class="left">
                        <img :src="item.picture" alt="">
                        <section>
                            <span>{{item.name}}馆</span>
                            <span>{{item.saleInfo}}</span>
                        </section>
                    </div>
                    <div class="right">
                        <ul>
                            <router-link tag="li" :to="'/shopdetail/'+home.id" v-for="home,index in item.goods" :class="{li_hover:index == tabIndex}"  @mouseover="tabIndex = index" @mouseout="tabIndex = -1">
                                <div class="goods_item">
                                    <img :src="home.picture" alt="">
                                    <p>{{home.name}}</p>
                                    <p>{{home.desc}}</p>
                                    <p>￥{{home.price}}</p>
                                </div>
                                <div class="more" :class="{hover:index == tabIndex}">
                                    <span>找相似</span>
                                    <span>发现更多宝贝</span>
                                </div>
                            </router-link>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            
            tabIndex:-1
        }
    },
    props:['goodsList'],
    mounted() {
        
    },
}
</script>

<style lang="scss" scoped>
.home_section {
    background: #fff;

    .head {
        padding: 40px 0;
        display: flex;
        align-items: flex-end;

        h3 {
            flex: 1;
            font-size: 32px;
            font-weight: 400;
            margin-left: 6px;
            height: 35px;
            line-height: 35px;
        }

        .sub {
            margin-right: 40px;

            a {
                padding: 2px 12px;
                font-size: 16px;
                border-radius: 4px;
            }
        }
    }

    .content {
        display: flex;

        .left {
            width: 240px;
            height: 610px;
            margin-right: 10px;
            position: relative;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            section {
                width: 188px;
                height: 66px;
                display: flex;
                font-size: 18px;
                color: #fff;
                line-height: 66px;
                font-weight: 400;
                position: absolute;
                left: 0;
                top: 50%;

                span {
                    &:nth-of-type(1) {
                        width: 76px;
                        background: rgba(0, 0, 0, .9);
                    }

                    &:nth-of-type(2) {
                        flex: 1;
                        background: rgba(0, 0, 0, .7);
                    }
                }
            }
        }

        .right {
            ul {
                width: 990px;
                display: flex;
                flex-wrap: wrap;
                .li_hover{ 
                    // border-color: #27ba9b  !important;
                    border:1px solid #27ba9b !important;
                }
                li {
                    position: relative;
                    width: 240px;
                    height: 300px;
                    overflow:hidden;
                    margin-right: 10px;
                    margin-bottom: 10px;
                    border-bottom:1px solid #27ba9b;
                    border-top:1px solid transparent;
                    border-left:1px solid transparent;
                    border-right:1px solid transparent;
                    

                    &:nth-of-type(4) {
                        margin-right: 0;
                    }

                    &:nth-of-type(8) {
                        margin-right: 0;
                    }

                    .goods_item {
                        width: 240px;
                        height: 300px;
                        padding: 10px 30px;
                        overflow: hidden;
                        border: 1px solid transparent;
                        transition: all .5s;

                        img {
                            width: 160px;
                            height: 160px;
                            margin: 0 auto;
                        }

                        p {
                            margin-top: 6px;
                            font-size: 16px;

                            &:nth-of-type(1) {
                                // word-break: break-all;
                                display: -webkit-box;
                                -webkit-box-orient: vertical;
                                -webkit-line-clamp: 2;
                                text-overflow: ellipsis;
                                overflow: hidden;
                            }

                            &:nth-of-type(2) {
                                text-overflow: ellipsis;
                                overflow: hidden;
                                white-space: nowrap;
                            }

                            &:nth-of-type(3) {
                                margin-top: 10px;
                                font-size: 20px;
                                color: #cf4444;
                            }
                        }
                    }

                    .hover{ 
                        bottom:86px !important;
                    }
                    .more {
                        position: absolute;
                        left: 0;
                        bottom:0px;
                        height: 86px;
                        width: 100%;
                        background: #27ba9b;
                        text-align: center;
                        transform: translate3d(0, 100%, 0);
                        transition: all .5s;

                        span {
                            display: block;
                            color: #fff;
                            width: 120px;
                            margin: 0 auto;
                            line-height: 30px;

                            &:nth-of-type(1) {
                                font-size: 18px;
                                border-bottom: 1px solid #fff;
                                line-height: 40px;
                                margin-top: 5px;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>